<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="bootstrap-5.3.0-dist/css/bootstrap.min.css">
</head>
<body>
  <div id="carouselSlide" class="carousel slide" data-bs-ride="carousel" data-bs-interval="2000" data-bs-wrap="false">
    <!-- 轮播项目 -->
    <div class="carousel-inner">
      <div class="carousel-item active">
        <img src="images/slide_01.jpg" class="d-block w-100" alt="">
      </div>
      <div class="carousel-item">
        <img src="images/slide_02.jpg" class="d-block w-100" alt="">
      </div>
      <div class="carousel-item">
        <img src="images/slide_03.jpg" class="d-block w-100" alt="">
        <div class="carousel-caption d-none d-md-block">
          <h5>科技的力量</h5>
          <p>未来可期</p>
        </div>
      </div>
    </div>    
    <!-- 指示器 -->
    <div class="carousel-indicators">
      <button type="button" data-bs-target="#carouselSlide" data-bs-slide-to="0" class="active"></button>
      <button type="button" data-bs-target="#carouselSlide" data-bs-slide-to="1"></button>
      <button type="button" data-bs-target="#carouselSlide" data-bs-slide-to="2"></button>
    </div>    
    <!-- 左右切换按钮 -->
    <button class="carousel-control-prev" type="button" data-bs-target="#carouselSlide" data-bs-slide="prev">
      <span class="carousel-control-prev-icon"></span>
    </button>
    <button class="carousel-control-next" type="button" data-bs-target="#carouselSlide" data-bs-slide="next">
      <span class="carousel-control-next-icon"></span>
    </button>
  </div>
  <script src="bootstrap-5.3.0-dist/js/bootstrap.min.js"></script>
</body>
</html>